<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>收到的玩具为：{{ toy }}</h4>
  </div>
</template>

<script setup lang="ts" name="Child1">
import { onUnmounted } from 'vue';
import {ref} from 'vue'

let toy = ref()

//引入事件
import emitter from '@/utils/emitter';

//绑定事件
emitter.on('send-toy',(value)=>{
	console.log('send-toy 事件被触发',value)
	toy.value = value

	// 同时触发 abc 事件
	emitter.emit('abc','xyz')
})

//卸载得时候解绑事件
onUnmounted(()=>{

	emitter.off('send-toy ')

})




</script>

<style scoped>
	.child1{
		margin-top: 50px;
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
	.child1 button{
		margin-right: 10px;
	}
</style>